html {
        scroll-behavior: smooth;
      }
      body {
        background: #fff;
      }
      /* HEADER */
      .success-header {
        min-height: 90vh;
        display: flex;
        align-items: center;
        padding: 0 8%;
        background:
          linear-gradient(
            to right,
            rgba(0, 102, 255, 0.92) 30%,
            rgba(0, 102, 255, 0.2) 80%,
            rgba(245, 244, 244, 0) 100%
          ),
          url("../image/image/College\ Student\ Photo\ &\ Student\ Image.jfif")
            center/cover no-repeat;
        background-size: right;
        background-position: right center;
        background-repeat: no-repeat;
      }

      /* CONTENT */
      .header-content {
        max-width: 480px;
        color: #fff;
      }

      .header-content h1 {
        font-size: 60px;
        line-height: 1.2;
        margin-bottom: 14px;
      }

      .header-content p {
        font-size: 24px;
        margin-bottom: 22px;
        opacity: 0.95;
      }

      /* BUTTON */
      .join-btn {
        display: inline-block;
        background: #ff9800;
        color: #fff;
        padding: 12px 28px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
        transition: 0.3s;
      }

      .join-btn:hover {
        background: #e68900;
      }

      /* RESPONSIVE */
      @media (max-width: 768px) {
        .success-header {
          min-height: 300px;
          padding: 0 6%;
          background:
            linear-gradient(
              to right,
              rgba(0, 102, 255, 0.9),
              rgba(239, 240, 240, 0.9)
            ),
            url("../image/image/College\ Student\ Photo\ &\ Student\ Image.jfif")
              center/cover no-repeat;
        }

        .header-content h1 {
          font-size: 32px;
        }
      }
      /* ===== ROW SLIDER ===== */
      .slider-row {
        display: flex;
        align-items: center;
        gap: 25px;
        padding: 25px 40px;
        background-color: #cfdce8;
      }

      .slider-window {
        flex: 1;
        overflow: hidden;
      }

      .slider-track {
        display: flex;
        gap: 20px;
        transition: transform 0.5s ease;
      }

      .student-box {
        min-width: 190px;
        background: #f8f9fa;
        padding: 12px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        scroll-snap-align: start;
        flex-shrink: 0;
      }

      /* image wrapper */
      .student-img {
        position: relative;
      }

      /* student photo */
      .student-box img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 10px;
      }

      /* AIR rank badge */
      .rank-badge {
        position: absolute;
        top: 0px;
        right: 0px;
        background: #ff9800;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        padding: 6px 8px;
        border-radius: 0 0 0 10px;
        line-height: 1.1;
      }
      /* text styling */
      .student-box h2 {
        font-size: 16px;
        margin: 8px 0 2px;
        color: #0b2a66;
      }

      .student-box .exam {
        font-size: 14px;
        color: #555;
      }
      /* BUTTON */
      .nav-btn {
        background: #0a3cff;
        color: #fff;
        border: none;
        font-size: 22px;
        padding: 8px 20px;
        cursor: pointer;
        border-radius: 50%;
      }
      @media (max-width: 768px) {
        .slider-row {
          padding: 25px 10px;
          flex-direction: column;
        }
        .nav-btn {
          display: none;
        }
        .student-box {
          min-width: 85%;
        }
        .slider-window {
          width: 100%;
          overflow-x: auto;
          scroll-behavior: smooth;
          scroll-snap-type: x mandatory;
        }
        
      }